<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b text-white p-2 box-border" style="border-color: #303030;">
			{{$t('bibi.tubiao')}}
		</view>
		<view class="p-2 box-border">
			<div class="chart-container" ref="chartContainer"></div>
		</view>
	</view>
</template>

<script>
	import { createChart } from 'lightweight-charts';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				chart: null, // 存储图表实例
				candlestickSeries: null, // 存储K线图系列
				volumeSeries: null, // 存储成交量图系列
				data: [], // 存储K线数据数组
				// 样式配置
				chartOptions: {
					width: 800, // 图表宽度
					height: 400, // 图表高度
					layout: {
						background: {
							type: 'solid',
							color: '#000000'
						},
						textColor: '#d1d4dc', // 设置文字颜色为浅灰色
					},
					grid: {
						vertLines: {
							color: '#2a2e39'
						}, // 设置垂直网格线颜色
						horzLines: {
							color: '#2a2e39'
						} // 设置水平网格线颜色
					},
					crosshair: {
						mode: 1, // 设置为 1 启用十字线（可交互）1 = 正常显示模式（0 为隐藏，2 为磁吸模式）
						vertLine: {
							labelVisible: true, // 显示垂直标签
							labelBackgroundColor: '#363A45'
						},
						horzLine: {
							labelVisible: true, // 显示水平标签 
							labelBackgroundColor: '#363A45'
						}
					},
					rightPriceScale: {
						borderColor: '#2a2e39', // 右侧价格刻度边框颜色
						borderVisible: true, // 确保边框可见
						visible: true, // 确保价格刻度可见
						scaleMargins: {
							top: 0.1, // 上边距比例
							bottom: 0.2, // 下边距比例
						},
					},
					timeScale: {
						borderColor: '#2a2e39', // 时间刻度边框颜色
						timeVisible: true, // 显示时间
						borderVisible: true, // 确保时间轴边框可见
					},
					// 启用价格标签
					priceScale: {
						borderVisible: true,
					},
					// 添加信息面板配置
					localization: {
						locale: 'zh-CN',
						priceFormatter: price => Math.round(price).toLocaleString(),
						timeFormatter: time => {
							const date = new Date(time * 1000);
							return 66666;
						},
					},
				}
			}
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		mounted() {
			this.initChart(); // 初始化图表
			this.loadChartData(); // 加载图表数据
		},
		methods: {
			// 初始化图表方法
			initChart() {
				if (!this.$refs.chartContainer) {
					console.error('图表容器元素未找到');
					return;
				}
				// 创建图表实例，传入DOM引用和配置选项
				this.chart = createChart(this.$refs.chartContainer, this.chartOptions);
				// 添加K线图系列到图表
				this.candlestickSeries = this.chart.addCandlestickSeries({
					upColor: '#26a69a', // 上涨蜡烛颜色（绿色）
					downColor: '#ef5350', // 下跌蜡烛颜色（红色）
					borderVisible: false, // 不显示蜡烛边框
					wickUpColor: '#26a69a', // 上涨蜡烛影线颜色
					wickDownColor: '#ef5350', // 下跌蜡烛影线颜色
					lastValueVisible: true, // 显示最后的价格值
				});

				// 添加成交量直方图系列到图表
				this.volumeSeries = this.chart.addHistogramSeries({
					color: '#26a69a', // 默认颜色（绿色）
					priceFormat: {
						type: 'volume', // 价格格式为成交量
					},
					priceScaleId: '', // 将成交量放在单独的价格轴上
					scaleMargins: {
						top: 0.8, // 上边距比例（放在图表底部）
						bottom: 0, // 下边距比例
					},
				});

				// 添加7日移动平均线系列
				this.ma7Series = this.chart.addLineSeries({
					color: '#2196F3', // 蓝色线 - 7日均线
					lineWidth: 2, // 线宽
					priceLineVisible: false, // 不显示价格线
				});

				// 添加30日移动平均线系列
				this.ma30Series = this.chart.addLineSeries({
					color: '#E91E63', // 粉色线 - 30日均线
					lineWidth: 2, // 线宽
					priceLineVisible: false, // 不显示价格线
				});
				
				// 添加布林带上轨线
				this.upperBandSeries = this.chart.addLineSeries({
					color: '#FFA726', // 橙色线 - 布林带上轨
					lineWidth: 1, // 线宽
					lineStyle: 2, // 虚线样式
					priceLineVisible: false, // 不显示价格线
				});
				
				// 添加布林带中轨线 (20日移动平均线)
				this.middleBandSeries = this.chart.addLineSeries({
					color: '#FFEB3B', // 黄色线 - 布林带中轨
					lineWidth: 1, // 线宽
					priceLineVisible: false, // 不显示价格线
				});
				
				// 添加布林带下轨线
				this.lowerBandSeries = this.chart.addLineSeries({
					color: '#FFA726', // 橙色线 - 布林带下轨
					lineWidth: 1, // 线宽
					lineStyle: 2, // 虚线样式
					priceLineVisible: false, // 不显示价格线
				});
				
				// 添加MACD直方图系列
				this.macdHistogramSeries = this.chart.addHistogramSeries({
					color: '#26a69a', // 默认颜色（绿色）
					priceScaleId: 'macd', // 将MACD放在单独的价格轴上
					scaleMargins: {
						top: 0.8, // 上边距比例
						bottom: 0, // 下边距比例
					},
				});
				
				// 添加MACD线
				this.macdLineSeries = this.chart.addLineSeries({
					color: '#2962FF', // 蓝色线 - MACD线
					lineWidth: 1, // 线宽
					priceScaleId: 'macd', // 使用与MACD直方图相同的价格轴
					scaleMargins: {
						top: 0.8, // 上边距比例
						bottom: 0, // 下边距比例
					},
				});
				
				// 添加MACD信号线
				this.macdSignalSeries = this.chart.addLineSeries({
					color: '#FF6D00', // 橙色线 - 信号线
					lineWidth: 1, // 线宽
					priceScaleId: 'macd', // 使用与MACD直方图相同的价格轴
					scaleMargins: {
						top: 0.8, // 上边距比例
						bottom: 0, // 下边距比例
					},
				});
				
				// 适应容器大小
				this.chart.applyOptions({
					autoSize: true
				});
				
				console.log('this.chart',this.chart);
				
			},

			// 加载图表数据方法
			loadChartData() {
				// 设置基础价格和成交量（模拟数据）
				const basePrice = 85000000000; // 基础价格
				const baseVolume = 500000000; // 基础成交量
				const candleData = []; // 存储K线数据的数组
				const volumeData = []; // 存储成交量数据的数组

				// 生成60天的数据
				const now = new Date(); // 获取当前日期
				for (let i = 59; i >= 0; i--) {
					const time = new Date(); // 创建新日期对象
					time.setDate(now.getDate() - i); // 设置为当前日期减去i天
					const timestamp = Math.floor(time.getTime() / 1000); // 转换为Unix时间戳（秒）

					// 生成价格数据
					let open, high, low, close; // 声明OHLC变量（开盘价、最高价、最低价、收盘价）

					if (i === 59) {
						// 第一个蜡烛的数据生成
						open = basePrice; // 第一天开盘价设为基础价格
						close = basePrice * (1 + (Math.random() * 0.06 - 0.03)); // 收盘价在±3%范围内随机波动
						high = Math.max(open, close) * (1 + Math.random() * 0.03); // 最高价比开盘价和收盘价的较大值再高0-3%
						low = Math.min(open, close) * (1 - Math.random() * 0.03); // 最低价比开盘价和收盘价的较小值再低0-3%
					} else {
						// 后续蜡烛基于前一天收盘价生成
						const prevClose = candleData[candleData.length - 1].close; // 获取前一天收盘价
						open = prevClose; // 开盘价等于前一天收盘价
						close = prevClose * (1 + (Math.random() * 0.06 - 0.03)); // 收盘价在±3%范围内随机波动
						high = Math.max(open, close) * (1 + Math.random() * 0.03); // 最高价计算
						low = Math.min(open, close) * (1 - Math.random() * 0.03); // 最低价计算

						// 添加趋势 - 在第40天到第10天之间形成上升趋势
						if (i < 40 && i > 10) {
							close = prevClose * (1 + (Math.random() * 0.03 + 0.005)); // 收盘价有0.5%-3.5%的上涨偏向
						}
					}

					// 将生成的K线数据添加到数组
					candleData.push({
						time: timestamp, // 时间戳
						open: open, // 开盘价
						high: high, // 最高价
						low: low, // 最低价
						close: close // 收盘价
					});

					// 生成并添加成交量数据
					const volume = baseVolume * (1 + Math.random() * 2); // 成交量在基础值的1-3倍之间随机
					volumeData.push({
						time: timestamp, // 时间戳
						value: volume, // 成交量值
						color: close >= open ? '#26a69a' : '#ef5350' // 根据涨跌设置颜色：涨-绿色，跌-红色
					});
				}

				// 计算移动平均线数据
				const ma7Data = this.calculateMA(candleData, 7); // 计算7日均线
				const ma30Data = this.calculateMA(candleData, 30); // 计算30日均线
				
				// 计算布林带数据 (基于20日移动平均线，标准差倍数为2)
				const bollingerBands = this.calculateBollingerBands(candleData, 20, 2);
				
				// 计算MACD数据 (快线12日，慢线26日，信号线9日)
				const macdData = this.calculateMACD(candleData, 12, 26, 9);

				// 将数据设置到各个图表系列
				this.candlestickSeries.setData(candleData); // 设置K线数据
				this.volumeSeries.setData(volumeData); // 设置成交量数据
				// this.ma7Series.setData(ma7Data); // 设置7日均线数据
				// this.ma30Series.setData(ma30Data); // 设置30日均线数据
				
				// 设置布林带数据
				this.upperBandSeries.setData(bollingerBands.upper);
				this.middleBandSeries.setData(bollingerBands.middle);
				this.lowerBandSeries.setData(bollingerBands.lower);
				
				// 设置MACD数据
				this.macdHistogramSeries.setData(macdData.histogram);
				this.macdLineSeries.setData(macdData.macd);
				this.macdSignalSeries.setData(macdData.signal);

				// 保存K线数据以便后续使用
				this.data = candleData;
				
				// 自动调整时间轴以显示所有数据
				this.chart.timeScale().fitContent();
			},

			// 计算移动平均线的方法
			calculateMA(data, period) {
				const result = []; // 存储计算结果的数组

				for (let i = 0; i < data.length; i++) {
					if (i < period - 1) {
						continue; // 跳过前(period-1)天，因为数据不足以计算均线
					}

					let sum = 0; // 初始化求和变量
					for (let j = 0; j < period; j++) {
						sum += data[i - j].close; // 累加过去period天的收盘价
					}

					// 将计算结果添加到结果数组
					result.push({
						time: data[i].time, // 使用当前日期的时间戳
						value: sum / period // 计算平均值
					});
				}

				return result; // 返回计算结果
			},
			
			// 计算布林带的方法
			calculateBollingerBands(data, period, multiplier) {
				const result = {
					upper: [],
					middle: [],
					lower: []
				};
				
				// 至少需要period个数据点才能计算
				if (data.length < period) {
					return result;
				}
				
				for (let i = 0; i < data.length; i++) {
					if (i < period - 1) {
						continue; // 跳过前(period-1)天
					}
					
					// 计算移动平均线 (中轨)
					let sum = 0;
					for (let j = 0; j < period; j++) {
						sum += data[i - j].close;
					}
					const ma = sum / period;
					
					// 计算标准差
					let squaredDiffSum = 0;
					for (let j = 0; j < period; j++) {
						const diff = data[i - j].close - ma;
						squaredDiffSum += diff * diff;
					}
					const stdDev = Math.sqrt(squaredDiffSum / period);
					
					// 计算上轨和下轨
					const upper = ma + (multiplier * stdDev);
					const lower = ma - (multiplier * stdDev);
					
					// 添加到结果数组
					result.upper.push({
						time: data[i].time,
						value: upper
					});
					
					result.middle.push({
						time: data[i].time,
						value: ma
					});
					
					result.lower.push({
						time: data[i].time,
						value: lower
					});
				}
				
				return result;
			},
			
			// 计算MACD的方法
			calculateMACD(data, fastPeriod, slowPeriod, signalPeriod) {
				const result = {
					macd: [],
					signal: [],
					histogram: []
				};
				
				// 计算EMA (指数移动平均线)
				const calculateEMA = (data, period) => {
					const k = 2 / (period + 1); // 平滑系数
					const emaData = [];
					
					// 第一个EMA值使用简单平均
					let sum = 0;
					for (let i = 0; i < period; i++) {
						sum += data[i].close;
					}
					let ema = sum / period;
					
					// 计算剩余的EMA值
					for (let i = period; i < data.length; i++) {
						ema = (data[i].close - ema) * k + ema;
						emaData.push({
							time: data[i].time,
							value: ema
						});
					}
					
					return emaData;
				};
				
				// 确保有足够的数据
				if (data.length < Math.max(fastPeriod, slowPeriod) + signalPeriod) {
					return result;
				}
				
				// 计算快线EMA和慢线EMA
				const fastEMA = calculateEMA(data, fastPeriod);
				const slowEMA = calculateEMA(data, slowPeriod);
				
				// 计算MACD线 (快线EMA - 慢线EMA)
				const macdLine = [];
				// 由于EMA计算方式，两个数组的起始点不同，需要对齐
				const offset = slowPeriod - fastPeriod;
				
				for (let i = 0; i < slowEMA.length; i++) {
					const macdValue = fastEMA[i + offset].value - slowEMA[i].value;
					macdLine.push({
						time: slowEMA[i].time,
						value: macdValue
					});
				}
				
				// 计算信号线 (MACD的9日EMA)
				let signalLine = [];
				if (macdLine.length >= signalPeriod) {
					// 计算信号线的第一个值 (简单平均)
					let sum = 0;
					for (let i = 0; i < signalPeriod; i++) {
						sum += macdLine[i].value;
					}
					let signal = sum / signalPeriod;
					
					// 计算剩余的信号线值
					const k = 2 / (signalPeriod + 1);
					for (let i = signalPeriod; i < macdLine.length; i++) {
						signal = (macdLine[i].value - signal) * k + signal;
						signalLine.push({
							time: macdLine[i].time,
							value: signal
						});
						
						// 计算MACD柱状图 (MACD线 - 信号线)
						const histogram = macdLine[i].value - signal;
						result.histogram.push({
							time: macdLine[i].time,
							value: histogram,
							color: histogram >= 0 ? '#26a69a' : '#ef5350' // 正值为绿色，负值为红色
						});
						
						// 添加到结果
						result.macd.push({
							time: macdLine[i].time,
							value: macdLine[i].value
						});
						
						result.signal.push({
							time: macdLine[i].time,
							value: signal
						});
					}
				}
				
				return result;
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>